const name = 'creatijin';
const obj = {
  age: 29,
  name,//(1)
  getName(){return this.name}//(2)
};

//단축 속성명을 사용하지 않는 경우
function programer1(age, name) {
  return {age: age, name: name};
}

//단축 속성명을 사용한 경우
function programer2(age, name) {
  return {age, name};
}

//계산된 속성명 사용하지 않는 경우
function programer1(key, value) {
  const obj = {};
  obj[key] = value;
  return obj;
}
//계산된 속성명 사용한 경우
function programer1(key, value) {
  return {[key]: value};
}
//계산된 속성명을 사용하면 함수를 간결하게 작성할 수 있다.

//react에서 컴포넌트 상탯값 변경하기
class myCom extends Component {
  state = {
    count1:0,
    count2:0,
    count3:0,
  };
	onClick = index => {
    const key = `count${index}`;
    const value = this.state[key];
    this.setState({ [key]: value + 1 });
  }
}
//setState 호출 시 계산된 속성명을 사용할 수 있다.

const languages = ['Python', 'Javascript', 'Kotlin', 'Go', 'Scala'];
console.log(...languages); // Python Javascript Kotlin Go Scala

const arr1 = [1,2,3];
const obj1 = {age:23, name:'mike'};
const arr2 = [...arr1];
const obj2 = {...obj1};

const arr = [1,2];
const [a,b] = arr;
console.log(a); //1
console.log(b); //2
//배열의 속성값이 왼쪽부터 순서대로 들어간다.

let c,d;
[c, d] = [1,2];
//이미 존재하는 변수에 할당할 수도 있다.

const arr = [1];
const [a=10, b=20] = arr;
console.log(a); //1
console.log(b); //20
//배열의 속성값이 undefined라면 정의된 기본값이 할당되고, 그렇지 않다면 원래의 속성값이 할당된다.

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a) //2
console.log(b) //1
//두 변수의 값을 쉽게 교환할 수 있다. 
//*두 변수가 값을 교환하기 위해서는 제 3의 변수를 이용하는게 일반적이지만 비구조화를 사용하면 짧은 코드로 구현할 수 있다.

const arr = [1,2,3];
const [a, ,c] = arr;
console.log(a); //1
console.log(c); //3
//일부 속성값을 무시하고 진행하고자 한다면 건너뛰는 개수만큼 쉼표를 입력하면 된다.

const arr = [1,2,3];
const [first, ...rest1] = arr;//(1)
console.log(rest1); //[2,3]
const [a,b,c,...rest2] = arr;//(2)
console.log(rest2) // []
//(1)배열 비구조화시 마지막에 전개 연산자(...)를 변수명으로 입력하면 나머지 모든 속성값이 새로운 배열로 만들어진다.
//(2)나머지 속성값이 존재하지 않으면 빈 배열이 만들어진다.

const obj = {age:29, name: 'creatijin'};
const {age, name} = obj;
console.log(age); //29
console.log(name); //creatijin

const obj = {age:29, name: 'creatijin'};
const {age, name} = obj;//age:29, name:creatijin
const {name, age} = obj;//age:29, name:creatijin
const {a,b} = obj; // undefined
//배열 비구조화에서는 배열의 순서가 중점이였지만 객체 비구조화에서는 순서는 의미가 없고 기존의 속성명을 그대로 사영해야 한다는 점이 있다.

//별칭(Alias)사용하기
//별칭은 중복된 변수명을 피하거나, 좀 더 구체적인 변수명을 만들때 사용한다
const obj = {age:29, name: 'creatijin'};
const {age:theAge, name} = obj;
console.log(theAge); //29
console.log(age) // Reffrence Error
//theAge라는 이름의 변수만 할당되고 age변수는 할당되지 않는다.

//객체 비구조화에서의 기본값
const obj = {age: undefined, name: null, grade: 'A'};
const {age = 0, name = 'noName', grade='F'} = obj;
console.log(age); // 0; undefined인 경우에 기본값이 들어간다.
console.log(name); // null null은 기본값에 들어가지 않는다.
console.log(grade) // A

const obj = {age: undefined, name: 'creatijin'};
const {age: theAge = 0, name} = obj;
console.log(theAge); // 0
//이런식으로 기본값과 별칭과 동시에 사용 가능하다.

//객체 비구조화에서 나머지 속성들을 별도의 객체로 생성
//Spread Operator(전개 연산자)를 사용하여 별도의 객체로 분리 할 수 있다.
const obj = {age: 29, name: 'creatijin', grade: 'A'};
const{age, ...rest} = obj;
console.log(rest); // {name: 'creatijin', grade: 'A'}

//for문을 이용한 객체 비구조화
const people = [{age: 29, name: 'creatijin'}, {age:29, name: 'seungjin'}];
for (const {age, name} of people) {
    // ...
}